<!DOCTYPE html>
<html lang="en">
<head>
    <title>报告详情</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        .blockUI {
            display: none;
        !important;
        }

        .fixed-table_body tr td {
            /*border-right: none;*/
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }
        span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-align: left;
            color: #2a8cec;
            -webkit-line-clamp: 1;
        }
        .lineOne span, .lineSpan {
            max-height: 20px;
            line-height: 20px;
            text-align: left;
            color: #2a8cec;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            padding-right: 10px;
        }
        .divMore{
            width: 12px;
            height: 12px;
            position: absolute;
            background-image: url(/dist/img/gengduo.png);
            background-repeat: no-repeat;
            background-size: cover;
            right: 5px;
            top: 3px;
        }
        .divMore_active{
            width: 12px;
            height: 12px;
            position: absolute;
            background-image: url(/dist/img/shouqi.png);
            background-repeat: no-repeat;
            background-size: cover;
            right: 5px;
            top: 3px;
        }
        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }
        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }
        .fixed-table-box .fixed-table_header th{
            border:1px solid #cbcbcd ;
        }
    </style>
</head>
<body>
<section class="content" id="app" style="overflow-x: auto; ">
    <div class="div-td-content-more"><i></i></div>
    <div style="height: 25px; margin-bottom: 10px;">
        <input type="text" @focus="showDatePicker($event)" v-model="time" style="height: 28px; margin-bottom: 10px;">
    </div>
    <div class="box-body no-padding iframeH3" style="overflow: auto;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <div class="fixed-table-box head-fixed ">
            <div class="fixed-table_header-wraper">
                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                    <tr>
                        <th style="width:35px;">
                            <div class="table-cells">序号</div>
                        </th>
                        <th style="width:60px;">
                            <div class="table-cells">日期</div>
                        </th>
                        <th style="width: 80px;">
                            <div class="table-cells">提交时间</div>
                        </th>
                        <th style="width:60px;">
                            <div class="table-cells">状态</div>
                        </th>
                        <th style="width:60px;">
                            <div class="table-cells">查看人数</div>
                        </th>
                        <th style="width:60px;">
                            <div class="table-cells">评论人数</div>
                        </th>
                        <th></th>
                        <th style="width: 120px">
                            <div class="table-cells">操作</div>
                        </th>

                        <th style="width: 17px;">
                            <div class="table-cells"></div>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="fixed-table_body-wraper iframeFixed">
                <table class="fixed-table_body table-hover" cellspacing="0" cellpadding="0" border="0"
                       style="width: 100%;">
                    <tbody>
                    <template v-for="(item,i) in list">
                        <tr>
                            <td style="width:35px;">{{i+1}}</td>
                            <td style="width:60px;">{{(item.reportDate).substring(5,10)}}</td>
                            <td style="width: 80px;">{{formatDate(item.createTime)}}</td>
                            <!--<td style="width:15%;">{{convertFlage2Name(item.flage)}}</td>-->
                            <td style="width:60px;">
                                <i class="fa fa-check" v-if="item.flage=='0'" style="color:#349f2f;"></i>
                                <template v-else>
                                    <i class="fa fa-close" v-if="item.workFlag=='正常出勤'" style="color:red;"></i>
                                    <span v-if="item.workFlag=='请假'">请假</span>
                                    <span v-if="item.workFlag=='缺勤'">缺勤</span>
                                    <!--<template v-if="item.workFlag=='缺勤'">-->
                                    <!--<span v-if="isHoliday(item.reportDate)">休息</span>-->
                                    <!--<span v-else>缺勤</span>-->
                                    <!--</template>-->
                                </template>
                            </td>
                            <td style="width:60px;">{{item.readNum}}</td>
                            <td style="width:60px;">{{item.commentNum}}</td>
                            <td>
                                <table style="width: 100%;" class="fixed-table_body table-hover">
                                    <tr v-for="(item2,j) in item.commentList" v-if="checkMore=='gengduo'&&j<1" style="position: relative;height: 34px;line-height: 34px">
                                        <td style="width:100px;border-bottom-width: 0px"><span>{{item2.createUserName}}</span></td>
                                        <td style="width:100px;border-bottom-width: 0px"><span>{{formatDate(item2.createTime)}}</span></td>
                                        <!--<td style="width:15%;">{{convertFlage2Name(item.flage)}}</td>-->
                                        <td style="width:60px;border-bottom-width: 0px">
                                            <span :style="item2.grade=='合格'?'':'color:red'">{{item2.grade}}</span>
                                        </td>
                                        <td style="border-bottom-width: 0px" colspan="2"><span class="lineOne">{{spliceString(item2.evaluation,item2.otherDescription)}}</span>
                                            <div v-if="j==0" :class="checkMore=='gengduo'?'divMore':'divMore_active'" @click="checkMore1()"></div>
                                        </td>
                                    </tr>
                                    <tr v-for="(item2,j) in item.commentList" v-if="checkMore=='shouqi'" style="position: relative">
                                        <td style="width:100px;"><span >{{item2.createUserName}}</span></td>
                                        <td style="width:100px;"><span >{{formatDate(item2.createTime)}}</span></td>
                                        <!--<td style="width:15%;">{{convertFlage2Name(item.flage)}}</td>-->
                                        <td style="width:60px;">
                                            <span :style="item2.grade=='合格'?'':'color:red'">{{item2.grade}}</span>
                                        </td>
                                        <td colspan="2"><span class="lineOne">{{spliceString(item2.evaluation,item2.otherDescription)}}</span>
                                            <div v-if="j==0" :class="checkMore=='gengduo'?'divMore':'divMore_active'" @click="checkMore1()"></div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width: 120px">
                                <a href="javascript:void(0);" v-if="showABtn('edit',item)"
                                   @click="gotoDetail(item,'edit')">&nbsp;&nbsp;{{item.flage == "0" ? "修改":"写报告"}}&nbsp;&nbsp;</a>
                                <a href="javascript:void(0);" v-if="showABtnReissue('edit',item)"
                                   @click="gotoDetail(item,'edit')">&nbsp;&nbsp;{{item.flage == "0" ? "修改":"补发"}}&nbsp;&nbsp;</a>
                                <a href="javascript:void(0);" v-if="showABtn('browser',item)"
                                   @click="gotoDetail(item,'browser')">&nbsp;&nbsp;查看&nbsp;&nbsp;</a>
                            </td>
                        </tr>
                    </template>

                    </tbody>
                </table>
            </div>
        </div>
        <!--<table class="table table-hover text-center" >-->
        <!--<thead>-->
        <!--<tr>-->
        <!--<th style="width:115px;">序号</th>-->
        <!--<th style="width:230px;">报告日期</th>-->
        <!--<th style="width:175px;">状态</th>-->
        <!--<th>提交时间</th>-->
        <!--<th style="width:175px;">提交人</th>-->
        <!--<th style="width: 120px;">操作</th>-->
        <!--</tr>-->
        <!--</thead>-->
        <!--<tbody>-->
        <!--<tr v-for="(item,i) in list">-->
        <!--<td style="width:10%;">{{i+1}}</td>-->
        <!--<td style="width:20%;">{{item.reportDate}}</td>-->
        <!--&lt;!&ndash;<td style="width:15%;">{{convertFlage2Name(item.flage)}}</td>&ndash;&gt;-->
        <!--<td style="width:15%;">-->
        <!--<i class="fa fa-check" v-if="item.flage=='0'" style="color:#349f2f;"></i>-->
        <!--<i class="fa fa-close" v-else  style="color:red;"></i>-->
        <!--</td>-->
        <!--<td style="width:30%;">{{item.createTime}}</td>-->
        <!--<td style="width:15%;">{{item.userName}}</td>-->
        <!--<td >-->
        <!--<a href="javascript:void(0);" v-if="showABtn('edit',item)" @click="gotoDetail(item,'edit')">&nbsp;&nbsp;{{item.flage == "0" ? "修改":"写报告"}}&nbsp;&nbsp;</a>-->
        <!--<a href="javascript:void(0);" v-if="showABtnReissue('edit',item)" @click="gotoDetail(item,'edit')">&nbsp;&nbsp;{{item.flage == "0" ? "修改":"补发"}}&nbsp;&nbsp;</a>-->
        <!--<a href="javascript:void(0);" v-if="showABtn('browser',item)" @click="gotoDetail(item,'browser')">&nbsp;&nbsp;查看&nbsp;&nbsp;</a>-->
        <!--</td>-->
        <!--</tr>-->
        <!--</thead></table>-->
    </div>
    <!-- /.box-body -->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $.extend($.wyui, {
        postMethod: function (url, data, callback, sync) {
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                    }
                },
                error: function (e) {
                    console.log(url + e.responseText);
                }
            });
        },
    });

</script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {

                var text = $(this).text();
                if (text != "" && text != "-") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    console.log(urlConfig);
    var app = new Vue({
        el: '#app',
        data: {
            checkMore:'gengduo',
            currentUser: getCurrentUser(),
            yearList: [],
            monthList: [],
            shouldDay: [],
            year: 2017,
            month: 12,
            list: [],
            time: "",
            wechat: "false"
        },
        methods: {
            checkMore1:function(){
                var that=this
                if(that.checkMore=='shouqi'){
                    that.checkMore='gengduo'
                }else{
                    that.checkMore='shouqi'
                }
            },
            spliceString:function(evaluation,otherDescription){

                if (evaluation&&evaluation.indexOf("|")!=-1){
                    console.log(evaluation.replace(/\|/g,";"))
                    return evaluation.replace(/\|/gi,";")+";"+otherDescription
                }else{
                    return evaluation+";"+otherDescription
                }
            },
            formatDate: function (now) {
                if (now){
                    var d = new Date(now);
                    console.log("打印时间");
                    console.log(d);
                    var hour = d.getHours();
                    var minute = d.getMinutes();
                    var second = d.getSeconds();
                    var month = d.getMonth() + 1
                    var day = d.getDate();
                    if (hour < 10) {
                        hour = "0" + hour;
                    }
                    if (minute < 10) {
                        minute = "0" + minute;
                    }
                    if (month < 10) {
                        month = "0" + month;
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    return  month + "-" + day+ " " + hour + ":" + minute;
                }
            },
            browserRedirect: function () {
                var os = function () {
                    var ua = navigator.userAgent,
                        isWindowsPhone = /(?:Windows Phone)/.test(ua),
                        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
                        isAndroid = /(?:Android)/.test(ua),
                        isFireFox = /(?:Firefox)/.test(ua),
                        isChrome = /(?:Chrome|CriOS)/.test(ua),
                        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
                        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
                        isPc = !isPhone && !isAndroid && !isSymbian;
                    return {
                        isTablet: isTablet,
                        isPhone: isPhone,
                        isAndroid: isAndroid,
                        isPc: isPc
                    };
                }();
                console.log(os)
                if ((os.isAndroid || os.isPhone) && this.isipad()) {
                    //alert("手机" );
                    return true
                } else {
                    //alert("电脑,平板" );
                    return false
                }
            },
            isipad: function () {
                var ua = navigator.userAgent
                //600*960
                if (window.screen.width * window.screen.height > 500000) {
                    return false
                } else {
                    return true
                }
            },
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.time = dp.cal.getNewDateStr();
                        that.year = that.time.split('-')[0];
                        that.month = that.time.split('-')[1];
                        that.getList();
                        return true;
                    },
                    dateFmt: 'yyyy-MM'
                });
                $(e.target).blur();
            },
            getPingJiaList: function (item) {
                var that = this
                $.wyui.postMethod('/wreport/getPingjiaList.json', {
                    'reportDate': item.reportDate,
                    'sendUserId': item.userId
                }, function (r) {
                    //查看是当前的报告评价
                    if (r.todayList && r.todayList.length > 0) {
                        item.commentList = r.todayList
                    } else {
                        item.commentList = []
                    }

                })
            },
            isHoliday: function (reportDate) {
                if (this.shouldDay.indexOf(reportDate) != -1) {
                    return true
                } else {
                    return false
                }
            },
            getHoliday: function () {
                var that = this;
                var month;
                if ((that.month + "").length < 2) {
                    month = "0" + that.month
                } else {
                    month = "" + that.month
                }
                $.wyui.postMethod("/shouldHoliday/getShouldSignMonthList.json", {
                    year: that.year + "",
                    month: month,
                    frontType: getCurrentUser().frontFlag
                }, function (r) {
                    console.log(r)
                    var shouldDay = [];
                    for (var i = 0; i < r.length; i++) {
                        shouldDay.push(r[i].holiday)
                    }
                    that.shouldDay = shouldDay
                    console.log(shouldDay)
                });
            },
            gotoDetail: function (report, pageType) {
                var that = this;

                if (getCurrentUser().roleName == '区域经理') {
                    $.wyui.postMethod('/wreport/getWechatShare.json', {
                        userId: getCurrentUser().id,
                        reportDate: report.reportDate
                    }, function (r) {
                        that.wechat = r.records;
                    }, true)
                }
                if (report.userName == "刘腾" || report.userName == "宋红军") {
                    report.editable = true;
                }
                if (pageType == "edit") {
                    if (that.browserRedirect() && getCurrentUser().name != "隋华") {
                        alert("请用电脑写报告")
                        return
                    }
//                    top.addTabs({id:report.reportDate + report.userId,title: '写报告',close: true,url:'wreport/detail.html?userId=' + currentUser.id + '&reportDate=' + report.reportDate + '&pageType=edit&editable='+report.editable+ '&dateReissueEnd=' + report.dateReissueEnd+ '&flage=' + report.flage });

                    if (that.wechat == 'false') {
                        top.addTabs({
                            id: report.reportDate + report.userId,
                            title: '写报告',
                            close: true,
                            url: 'wreport/detail.html?userId=' + currentUser.id + '&reportDate=' + report.reportDate + '&pageType=edit&editable=' + report.editable + '&dateReissueEnd=' + report.dateReissueEnd + '&flage=' + report.flage+"&isComment=1"
                        });
                    } else {
                        alert("今日微信未按规定数量转发，请先转发微信")
                    }
                } else {
                    top.addTabs({
                        id: report.reportDate + report.userId,
                        title: '工作报告',
                        close: true,
                        url: 'wreport/detail.html?id=' + report.id + '&pageType=browser&isComment=1'
                    });
                }
            },
            showABtnReissue: function (aBtnName, report) {
                if (report.userName == "刘腾" || report.userName == "宋红军") {
                    return true;
                }
                switch (aBtnName) {
                    case "edit":
                        //alert(report.dateReissueEnd)
                        return report.dateReissueEnd;
                        break;
                    case "browser":
                        return report.id && report.id != "";
                        break;
                    default:
                        break;
                }
            },
            showABtn: function (aBtnName, report) {
                if (report.userName == "刘腾" || report.userName == "宋红军") {
                    return true;
                }
                switch (aBtnName) {
                    case "edit":
                        return report.draft;
                        break;
                    case "browser":
                        return report.id && report.id != "" && report.dateBrower;
                        break;
                    default:
                        break;
                }
            },
            convertFlage2Name: function (flage) {
                if (!flage) return "未提交";
                if (flage == "-1") return "已保存";
                if (flage == "0") return "已发送";
            },
            getWorkFlag: function (item) {
                var that = this;
                $.wyui.postMethod(urlConfig.wreport.wreport.getWorkFlag, {
                    userId: that.currentUser.id,
                    reportDate: item.reportDate
                }, function (r) {
                    item.workFlag = r[0].workFlag
                });
            },
            getList: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.wreport.wreport.getList, {
                    year: that.year,
                    month: that.month,
                    userId: that.currentUser.id
                }, function (list) {

                    for (var i = 0; i < list.length; i++) {
                        list[i].workFlag = '';
                        list[i].commentList = [];
                    }
                    for (var i = 0; i < list.length; i++) {
                        that.getWorkFlag(list[i])
                        that.getPingJiaList(list[i])
                    }
                    that.list = list;
                    console.log(that.list)

                });
            }
        },
        mounted: function () {
            var that = this;
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            this.year = year;
            this.month = month;
            for (var i = year; i > year - 3; i--) {
                this.yearList.push({value: i, name: i + "年"});
            }
            for (var i = 1; i <= 12; i++) {
                this.monthList.push({value: i, name: i + "月"});
            }
            //今天的日期
            var today = new Date().Format("yyyy-MM");
            that.time = today;
            this.getList();
            this.getHoliday();
        }
    });
</script>
<script>
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
</script>
</body>
</html>